<template>
  <div class="user">
    <mianbaoxie />
    <el-card class="box-card">
      <div class="top">
        <div style="margin-bottom: 15px;">
          <el-input placeholder="请输入内容" v-model="size.query" class="input-with-select">
            <el-button @click="serch" slot="append" icon="el-icon-search"></el-button>
          </el-input>
          <el-button type="primary" @click="dialogVisible = true">添加角色</el-button>
        </div>
      </div>

      <el-table :data="tableData.users" border style="width: 100%">
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column prop="username" label="姓名"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column prop="mobile" label="电话"></el-table-column>
        <el-table-column prop="role_name" label="角色"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.mg_state" active-color="#409EFF" @change="tapstate(scope.row)" inactive-color="#DCDFE6"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="updatadata(scope.row);dialogVisible2 = true" type="primary" icon="el-icon-edit"></el-button>
            <el-button size="mini" @click="deleteitem(scope.row)" type="danger" icon="el-icon-delete"></el-button>
            <el-tooltip content="分配角色" placement="top">
              <el-button size="mini" @click="fenpei(scope.row);dialogVisible3 = true" type="warning" icon="el-icon-setting"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="size.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="size.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total"
      ></el-pagination>
      <!-- 添加遮罩 -->
      <el-dialog title="添加用户  " :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
        <span>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="ruleForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="ruleForm.password" type="password"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="ruleForm.email"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="mobile">
              <el-input v-model="ruleForm.mobile"></el-input>
            </el-form-item>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="quxiao">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改用户 -->
      <el-dialog title="修改用户  " :visible.sync="dialogVisible2" width="50%" :before-close="handleClose2">
        <span>
          <el-form :model="ruleForm2" :rules="rules" ref="ruleForm2" label-width="80px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="ruleForm2.username" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="ruleForm2.email"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="mobile">
              <el-input v-model="ruleForm2.mobile"></el-input>
            </el-form-item>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="quxiao2">取 消</el-button>
          <el-button type="primary" @click="submitForm2('ruleForm2')">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 分配角色 -->
      <el-dialog title="分配角色  " width="50%" :visible.sync="dialogVisible3" :before-close="handleClose3">
        <span>
          <el-form label-width="90px" label-position="left" v-if="feipeirow" size="mini">
            <el-form-item label="当前用户">{{feipeirow.username}}</el-form-item>
            <el-form-item label="当前角色">{{feipeirow.role_name}}</el-form-item>
            <el-form-item label="分配新角色">
              <el-select v-model="region" placeholder="请选择活动区域">
                <el-option v-for="item in quanlist" :key="item.id" :label="item.roleName" :value="item.roleName">{{item.roleName}}</el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="quxiao3">取 消</el-button>
          <el-button type="primary" @click="submitForm3('ruleForm3')">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>


<script>
import mianbaoxie from "../components/mianbaoxie.vue";
import { initroles } from "../ulits/api/roles";
import {
  users,
  tapstate,
  updata,
  updatauser,
  add,
  deleteda,
  fenpei,
} from "../ulits/api/users";
export default {
  components: { mianbaoxie },
  name: "user",
  data() {
    return {
      tableData: {},
      text: "",
      size: { query: "", pagenum: 1, pagesize: 5 },
      value: true,
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
      feipeirow: null,
      region: "",
      quanlist: [],
      // 添加
      ruleForm: {
        mobile: "",
        username: "",
        password: "",
        email: "",
      },
      // 修改
      ruleForm2: {
        mobile: "",
        username: "",
        email: "",
      },
      // 验证
      rules: {
        username: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 18,
            message: "长度在 6 到 18 个字符",
            trigger: "blur",
          },
        ],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "长度在 11 个字符",
            trigger: "blur",
          },
        ],
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
      },
    };
  },
  created() {
    // 初始化数据
    users(this.size).then((res) => {
      if (res.meta.status === 200) {
        this.tableData = res.data;
        this.$message({
          message: res.meta.msg,
          type: "success",
        });
      }
    });
  },
  methods: {
    // 搜索
    serch() {
      users(this.size).then((res) => {
        if (res.meta.status === 200) {
          this.tableData = res.data;
          this.$message({
            message: res.meta.msg,
            type: "success",
          });
        }
      });
    },
    // 每页有几条
    handleSizeChange(val) {
      this.size.pagesize = val;
      this.updatausers();
    },
    // 当前是第几页
    handleCurrentChange(val) {
      this.size.pagenum = val;
      this.updatausers();
    },
    // 关闭添加弹框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 添加用户
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          add(this.ruleForm).then((res) => {
            this.Message(res);
            this.updatausers();
            this.ruleForm = {
              mobile: "",
              username: "",
              password: "",
              email: "",
            };
          });
        } else {
          return false;
        }
        this.dialogVisible = false;
      });
    },
    // 取消添加
    quxiao() {
      this.dialogVisible = false;
      this.ruleForm = {
        mobile: "",
        username: "",
        password: "",
        email: "",
      };
    },
    // 修改状态
    tapstate(row) {
      tapstate(row).then((res) => {
        if (res.meta.status >= 200 && res.meta.status < 300) {
          this.$message({
            message: res.meta.msg,
            type: "success",
          });
        } else {
          this.$message({
            message: res.meta.msg,
            type: "error",
          });
        }
      });
    },
    // 数据回填
    updatadata(row) {
      updata(row).then((res) => {
        this.ruleForm2 = res.data;
      });
    },
    // 关闭修改弹框
    handleClose2(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 确认修改用户
    submitForm2(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updatauser(this.ruleForm2).then((res) => {
            this.Message(res);
            this.updatausers();
          });
          this.ruleForm2 = {
            mobile: "",
            username: "",
            password: "",
            email: "",
          };
        } else {
          return false;
        }
        this.dialogVisible2 = false;
      });
    },
    // 取消修改
    quxiao2() {
      this.dialogVisible2 = false;
      this.ruleForm2 = {
        mobile: "",
        username: "",
        password: "",
        email: "",
      };
    },
    // 权限分配
    fenpei(row) {
      this.feipeirow = row;
      initroles().then((res) => {
        this.quanlist = res.data;
      });
    },
    // 取消分配
    handleClose3(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 确认分配用户
    submitForm3() {
      if (!this.region) {
        this.$message({
          message: "请选择要分配的角色",
          type: "error",
        });
        return;
      }
      let id = -1;
      this.quanlist.forEach((item) => {
        if (item.roleName === this.region) {
          id = item.id;
        }
      });
      fenpei({
        rid: this.feipeirow.id,
        id: id,
      }).then((res) => {
        this.Message(res);
        this.updatausers();
      });
      this.region = "";
      this.dialogVisible3 = false;
    },
    // 取消分配
    quxiao3() {
      this.dialogVisible3 = false;
    },
    // 删除
    deleteitem(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteda(row).then((res) => {
            this.Message(res);
            this.updatausers();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 消息提示
    Message(res) {
      if (res.meta.status >= 200 && res.meta.status < 300) {
        this.$message({
          message: res.meta.msg,
          type: "success",
        });
      } else {
        this.$message({
          message: res.meta.msg,
          type: "error",
        });
      }
    },
    // 获取数据
    updatausers() {
      users(this.size).then((res) => {
        if (res.meta.status === 200) {
          this.tableData = res.data;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  font-size: 12px;
}
.top {
  .el-input {
    width: 40%;
    margin-right: 15px;
  }
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>